<template>
    <div class="ecode">
        <div class="container">
            <div class="recharge-order">
                <cube-scroll
                        class="scroll-body"
                        ref="scroll"
                        :data="list"
                        :options="options"
                        @pulling-up="lists"
                >
                    <div v-for="item in list" class="order-item dis-flex flex-x-between flex-y-center">
                        <div class="item-left flex-box">
                            <div class="rec-status">
                                <div>{{ item.scene.text }}</div>
                            </div>
                            <div class="rec-time">
                                <div>{{ item.create_time }}</div>
                            </div>
                        </div>
                        <div class="item-right">
                            <div>{{ item.money > 0 ? '+' : '' }}{{ item.money }}元</div>
                        </div>
                    </div>
                    <!-- 没有记录 -->
                    <div class="yoshop-notcont" v-if="!list.length">
                        <!--                        <div class="iconfont icon-wushuju"></div>-->
                        <div class="cont">亲，暂无账单明细哦</div>
                    </div>
                </cube-scroll>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
    // @ is an alias to /src
    import {Component} from "vue-property-decorator";
    import Sence from "../sence/Sence";

    @Component({
        components: {},
    })

    export default class Ecode extends Sence {
        public list: any = []; // 总消费积分明细
        public page: number = 1; // 当前页码
        public size: any = 10; // 每页显示的条数
        public options: object = {
            pullUpLoad: true
        };//上拉加载
        public mounted(): void {
            this.lists();
        }

        public lists(): void {
            this.post("api/balance.log/lists", {page: this.page, size: this.size}).then((res: any) => {
                this.list = [...this.list, ...res.data.list.data];
                this.page += 1;
                if (res.data.list.data.length < this.size) {
                    this.options = {
                        pullUpLoad: false
                    };//上拉加载
                }
            });
        }

    }


</script>

<style scoped lang="stylus">
    .container {
        background: #fff;
    }

    .scroll-body {
        height 100vh
        box-sizing border-box
    }

    .recharge-order {
        padding: 0 15px;
    }

    .order-item {
        font-size: 14px;
        padding: 10px 10px;
        line-height: 1.8;
        border-bottom: 1px solid rgb(238, 238, 238);
    }

    .rec-status {
        color: #333;
    }

    .order-item .rec-time {
        color: rgb(160, 160, 160);
        font-size: 13px;
    }

    .col-green {
        color: #0ed339 !important;
    }

    .col-6 {
        color: #666;
    }

    .dis-flex {
        display: flex !important;
        /* flex-wrap: wrap; */
    }

    .flex-x-between {
        justify-content: space-between;
    }

    .flex-y-center {
        align-items: center;
    }

    .yoshop-notcont {
        padding: 65px 50px;
        box-sizing: border-box;
    }

    .yoshop-notcont .cont {
        display: block;
        text-align: center;
        font-size: 30 rpx;
        color: #999;
        margin-top: 10 rpx;
    }

</style>
